<template>
  <div >
    <x-header :left-options="{showBack: false}"  style="" >已参加课程<a slot="right" class="iconfont icon-more" @click='rightMenu'></a></x-header>
    <Scroller height="-100" lock-x  use-pulldown use-pullup :pulldown-config="{downContent: '下拉刷新', upContent: '释放后更新'}" :pullup-config="{upContent:'上拉加载更多', downContent: '释放后加载'}" ref="myScroller" @on-pulldown-loading="resetList" @on-pullup-loading="moreList">
      <div class="ListContainer">
            <p v-if='emptyVisible' class="empty-tip">--暂时没有参加课程--</p>
            <cell class="list-item" v-for="(item, index) in list" key="item.id"  :link="{path:'/detail', query:{item:item}}" :title="item.name"   >
            </cell>
      </div>
    </Scroller>
    <transition enter-active-class="animated slideInRight" leave-active-class="animated slideOutRight" mode="out-in">
      <rightMenu v-if='menuVisibel' close-fn='closeFn' class="rightMenu" />
    </transition>
  </div>
</template>
<script>

  import {Scroller, XHeader, Actionsheet,Group ,Cell } from 'vux';
  import config from '../config.js';
  import rightMenu from './rightMenu';


  export default {
    data () {
      return {
           list: [],
           scrollTop: 0,
           menuVisibel: false,
           emptyVisible: false
        }
    },
    mounted(){
      this.getList()
    },
    methods:{
      getList(){
        this.$vux.loading.show({
         text: '加载中'
        })
        this.$http({
          url:config.base+"student/courselist",
          method:"POST",
          headers:{
            'content-type':'application/x-www-form-urlencoded; charset=UTF-8',
          },
          data:this.qs.stringify({id:localStorage.userid})
        }).then( rep => {
          this.list=rep.data;
          rep.data.length<10?
          this.$refs.myScroller.disablePullup()
          :this.$refs.myScroller.donePullup();
          rep.data.length<1?
          this.emptyVisible = true
          :
          this.emptyVisible = false
          this.$vux.loading.hide()
        }).catch( (error) => {
          this.$vux.loading.hide()
          this.$vux.toast.show({
            text:"网络错误",
            type:'warn'
          })
        });
      },
      resetList () {
          this.$nextTick(() => {
            setTimeout(()=>{
              this.$refs.myScroller.donePulldown()
              this.getList()
              this.$refs.myScroller.reset()
            }, 1000)
          })
        },
      moreList () {
          this.$refs.myScroller.donePullup();
          this.$refs.myScroller.disablePullup();
        },
      rightMenu () {
          this.menuVisibel=true
        },
      },
     components: {
        XHeader,
        Actionsheet,
        Scroller,
        Group,
        Cell,
        rightMenu
      },
  }
</script>
<style scoped>
   .ListContainer-wrap{
    height:100%;
    overflow:hidden;
   }
   .list-item{
    font-size:18px;
   }
   .rightMenu{
    position: fixed;
    top: 0;right: 0;
    z-index: 999;
  }
</style>